<template>
    <d2-container>
        <div>
            <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                <el-form-item  label="轮播图" required>
                    <el-button type="primary" size="small" @click="addBanner">添加图片</el-button>
                    <sub style="color: red;">* 注：使用拖拽切换顺序</sub>
                    <el-table :data="tableData" row-key="id">
                        <el-table-column type="index" width="50" align="center"></el-table-column>
                        <el-table-column label="图片" width="180">
                            <template slot-scope="scope">
                                <el-upload
                                        class="avatar-uploader"
                                        :http-request="(fileObj) => handleAvatarSuccess(fileObj, 'table', scope.$index )"
                                        :show-file-list="false">
                                    <img v-if="scope.row.imageUrl" :src="scope.row.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </template>
                        </el-table-column>
                        <el-table-column label="链接">
                            <template slot-scope="scope">
                                <museLink v-model="scope.row.link"></museLink>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="removeBanner(scope.$index)" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </d2-container>
</template>

<script>
  import simpleRich from '@/components/muse/simple-rich/simple-rich'
  import museLink from '@/components/muse/muse-link/muse-link'
  import banner from '@/components/muse/banner/banner'
  import uploadMixin from '@/views/musePage/mixins/uploadMixin'
  import { getBanner, changeBanner } from '@/api/admin'

  import Sortable from 'sortablejs'
  export default {
    name: 'changeBanner',
    mixins: [uploadMixin],
    components: {
      simpleRich,
      banner,
      museLink
    },
    data() {
      return {
        detailForm: {
          page: 'store',
          image: [],
          refLink: []
        },
        tableData: []
      }
    },
    created () {
        this.getBanner()
    },
    mounted() {
      this.rowDrop()
    },
    methods: {
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      },
      // 添加轮播图
      addBanner() {
        this.tableData.push({
            id: new Date().getTime(),
            imageUrl:'',
            link: {}
        })
      },
      // 删除轮播图
      removeBanner(rowIndex) {
        this.tableData.splice(rowIndex, 1)
      },
      // 图片上传
      async handleAvatarSuccess(fileObj, type, index) {
        this.tableData[index].imageUrl = await this.fnUpload(fileObj)
      },
      // 得到详情
      async getBanner() {
        const res = await getBanner({page: 'store'})
        this.detailForm = res.data
        this.detailForm.image.forEach((item, index) => {
          this.tableData.push({
            id: new Date().getTime(),
            imageUrl: item,
            link: this.detailForm.refLink[index]
          })
        })
        console.log(this.tableData)
      },
      // 表单提交
      async submitForm (formName) {
        const params = {
          page: 'store',
          image: [],
          refLink: []
        }
        this.tableData.forEach(item => {
          params.image.push(item.imageUrl)
          params.refLink.push(item.link)
        })
        const res = await changeBanner(params)
        this.$message({
          message: '轮播图更新成功',
          type: 'success'
        });
      }
    }
  }
</script>

<style scoped>
    .from_width {
        width: 40%;
    }
</style>
